<template>
  <el-form label-width="100px" :model="form" ref="form" :rules="rules" size="small" :disabled="show !== 3">
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="负责人姓名：" prop="leader_name">
        <el-input class="w240" v-model="form.leader_name" maxlength="50"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="联系电话：" prop="leader_phone">
        <el-input class="w240" v-model="form.leader_phone" maxlength="11"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件类型：" prop="leader_id_type">
        <el-select class="w240" v-model="form.leader_id_type">
          <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件号码：" prop="leader_id_no">
        <el-input class="w240" v-model="form.leader_id_no"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件有效期：" prop="leader_time">
        <el-date-picker class="w240" value-format="yyyy-MM-dd" v-model="form.leader_time" placeholder=""></el-date-picker>
      </el-form-item>
    </el-col>
    <!-- <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件地址：" prop="leader_id_addr">
        <el-input class="w240" v-model="form.leader_id_addr"></el-input>
      </el-form-item>
    </el-col> -->
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <el-form-item label="图片上传：">
        <span class="fz12 err">图片上传大小不超过1M</span>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <label class="el-form-item__label" style="width: 100px;">证件照片：</label>
        
          <el-form-item style="display: inline-block;" label="" label-width="0" prop="leader_id_1" class="mr10">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccFacade">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_1" v-if="form.leader_id_1" alt="">
              <img src="https://mat.uphicoo.com/9c6aec02-916b-11e8-b647-10bf48e1a920.jpg" v-else alt="">
              <span class="err">*</span>
              <span class="fz12">身份证正面照</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display: inline-block;" label="" label-width="0" class="mr10" prop="leader_id_2">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccNegative">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_2" v-if="form.leader_id_2" alt="">
              <img src="https://mat.uphicoo.com/736eaf00-916b-11e8-9e5e-10bf48e1a920.jpg" v-else alt="">
              <span class="err">*</span>
              <span class="fz12">身份证反面照</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display: inline-block;" label="" label-width="0" class="mr10" prop="leader_id_3">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccLeadHead">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_3" v-if="form.leader_id_3" alt="">
              <img src="https://mat.uphicoo.com/681e3f44-916b-11e8-ba67-10bf48e1a920.jpg" v-else alt="">
              <span class="err">*</span>
              <span class="fz12">手持身份证照</span>
            </el-upload>
          </el-form-item>
        
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <el-form-item>
        <el-button type="primary" size="small" @click="handleClickSubmit" :loading="loading" :disabled="disabled">提交审核</el-button>
      </el-form-item>
    </el-col>
  </el-form>
</template>

<script>
import { merchantPrincipalUpdate } from '@/api/shop'
import { mapGetters } from 'vuex'
import { validatePhone, validateIdentity } from '@/utils/validate'

export default {
  data() {
    const validCard = (rule, value, callback) => {
      if (value !== '' && validateIdentity(value)) {
        callback()
      } else {
        callback(new Error('身份证号码格式不对哦~'))
      }
    }
    const validPhone = (rule, value, callback) => {
      if (value !== '' && validatePhone(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式不对哦~'))
      }
    }
    return {
      loading: false,
      disabled: false,
      options: [
        {
          id: 1,
          name: '身份证'
        }
      ],
      form: {
        leader_type: '',
        leader_name: '',
        leader_time: '',
        leader_phone: '',
        leader_id_no: '',
        leader_id_type: '',
        leader_id_1: '',
        leader_id_2: '',
        leader_id_3: '',
        leader_id_addr: ''
      },
      rules: {
        leader_id_type: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        leader_id_1: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_id_2: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_id_3: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        leader_time: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        leader_phone: [{ required: true, trigger: 'blur', validator: validPhone }],
        leader_id_no: [{ required: true, trigger: 'blur', validator: validCard }]
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  props: {
    merchantNum: {
      required: true
    },
    show: {
      required: true,
      type: Number
    }
  },
  computed: {
    merchant_type() {
      return this.$store.state.merchant.merchantType
    },
    contact_type() {
      return this.$store.state.merchant.contactsType
    },
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    handleClickSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          merchantPrincipalUpdate(this.merchantNum, this.id, this.form).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('负责人信息资料提交成功，请耐心等待审核~')
              this.loading = false
              this.disabled = true
              this.$emit('toogle', '4', 4)
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }
      })
    },
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleUploadSuccLeadHead(file) {
      this.form.leader_id_3 = file.result
    },
    handleUploadSuccFacade(file) {
      this.form.leader_id_1 = file.result
    },
    handleUploadSuccNegative(file) {
      this.form.leader_id_2 = file.result
    }
  }
}
</script>

